<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="staffTitle">设备进场详情</span>
      <div class="btn">
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPage">返回</el-button>
      </div>
    </div>

    <div class="device_info two-columns">
      <div class="title">设备进场</div>
      <div class="upload-pic">
        <span>设备照片：</span>
        <el-image
          v-for="(item, i) in deviceImage"
          :key="i"
          style="width: 100px; height: 100px; border: 1px solid #c7c7c7; border-radius: 3px;"
          :src="item.url"
          fit="cover"
          :preview-src-list="item.imageUrl">
        </el-image>
      </div>
      <div class="basic_info" style="margin-top: 10px;">
        <!-- 左侧信息 -->
        <div class="left-column">
          <div class="info_box">
            <span class="txt">进场编号：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.mobilizationSerialNumber }}</span>
          </div>
          <div class="info_box">
            <span class="txt">检测单位：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.unit }}</span>
          </div>
          <div class="info_box">
            <span class="txt">标段：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.bidSection }}</span>
          </div>
          <div class="info_box">
            <span class="txt">承包单位：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.contractingUnit }}</span>
          </div>
          <div class="info_box">
            <span class="txt">备案日期：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.recordTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">设备类型：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.deviceTypeName }}</span>
          </div>
          <div class="info_box">
            <span class="txt">规格型号：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.model }}</span>
          </div>
          <div class="info_box">
            <span class="txt">设备来源：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.deviceSource }}</span>
          </div>
          <div class="info_box">
            <span class="txt">出租单位：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.lessor }}</span>
          </div>
          <div class="info_box">
            <span class="txt">安装单位：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.installationUnit }}</span>
          </div>
          <div class="info_box">
            <span class="txt">安装单位资质：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.qualification }}</span>
          </div>
          <div class="info_box">
            <span class="txt">登记证书审批日期：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.registrationTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">设备责任人：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.devicePerson }}</span>
          </div>
          <div class="info_box">
            <span class="txt">定期接地检查：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.inspection }}</span>
          </div>
          <div class="info_box">
            <span class="txt">报审表编号：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.examinationNumber }}</span>
          </div>
        </div>

        <!-- 右侧信息 -->
        <div class="right-column">
          <div class="info_box">
            <span class="txt">进场时间：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.mobilizationTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">验收日期：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.acceptanceTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">检测单位资质：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.unitQualifications }}</span>
          </div>
          <div class="info_box">
            <span class="txt">监理单位：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.supervisorUnit }}</span>
          </div>
          <div class="info_box">
            <span class="txt">设备名称：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.deviceCnName }}</span>
          </div>
          <div class="info_box">
            <span class="txt">班组：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.team }}</span>
          </div>
          <div class="info_box">
            <span class="txt">使用地点：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.site }}</span>
          </div>
          <div class="info_box">
            <span class="txt">生产厂家：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.manufacturer }}</span>
          </div>
          <div class="info_box">
            <span class="txt">出厂时间：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.deliveryTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">出厂编号：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.factoryNumber }}</span>
          </div>
          <div class="info_box">
            <span class="txt">相关负责人：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.relevantPerson }}</span>
          </div>
          <div class="info_box">
            <span class="txt">检查报告编号：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.report }}</span>
          </div>
          <div class="info_box">
            <span class="txt">登记证书有效期：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.validityTime }}</span>
          </div>
          <div class="info_box">
            <span class="txt">设备操作员：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ formData.equipmentOperator }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="wire"></div>

    <div class="device_info two-columns">
      <div class="title">设备验收</div>
      <div class="upload-pic textarea-wrap">
        <span class="txt">验收意见及结论：</span>
        <span class="textarea">{{ form.opinion }}</span>
      </div>
      <div class="basic_info">
        <!-- 左侧信息 -->
        <div class="left-column">
          <div class="info_box">
            <span class="txt">处理人：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ form.operator }}</span>
          </div>
          <div class="info_box">
            <span class="txt">是否通过：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ form.handleState }}</span>
          </div>
          <div class="info_box" :class="[ designDocument.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">设计文件：</span>
            <div class="pic-wrap" v-if="designDocument.length > 0">
              <el-image
                v-for="(item, index) in designDocument"
                :key="item.id + index"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ licences.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">设备生产(制造)许可证：</span>
            <div class="pic-wrap" v-if="licences.length > 0">
              <el-image
                v-for="(item, index) in licences"
                :key="item.id + index"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ installationUnits.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">安装单位资质证书复印件：</span>
            <div class="pic-wrap" v-if="installationUnits.length > 0">
              <el-image
                v-for="(item, i) in installationUnits"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ instruction.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">设备操作规程使用说明：</span>
            <div class="pic-wrap" v-if="instruction.length > 0">
              <el-image
                v-for="(item, i) in instruction"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ inspectionCertificates.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">监督检验证明：</span>
            <div class="pic-wrap" v-if="inspectionCertificates.length > 0">
              <el-image
                v-for="(item, i) in inspectionCertificates"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ purchaseContracts.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">购买合同：</span>
            <div class="pic-wrap" v-if="purchaseContracts.length > 0">
              <el-image
                v-for="(item, i) in purchaseContracts"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
        </div>

        <!-- 右侧信息 -->
        <div class="right-column">
          <div class="info_box">
            <span class="txt">处理时间：</span>
            <span class="element_color">&nbsp;</span>
            <span class="text-val">{{ form.handleTime }}</span>
          </div>
          <div class="info_box" :class="[ certificates.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">产品质量合格证明：</span>
            <div class="pic-wrap" v-if="certificates.length > 0">
              <el-image
                v-for="(item, i) in certificates"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ reports.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">检测单位检测报告：</span>
            <div class="pic-wrap" v-if="reports.length > 0">
              <el-image
                v-for="(item, i) in reports"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ testingUnits.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">检测单位资质证书复印件：</span>
            <div class="pic-wrap" v-if="testingUnits.length > 0">
              <el-image
                v-for="(item, i) in testingUnits"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ maintenanceInstruction.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">维保说明：</span>
            <div class="pic-wrap" v-if="maintenanceInstruction.length > 0">
              <el-image
                v-for="(item, i) in maintenanceInstruction"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ certificateRegistrations.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">使用登记证书：</span>
            <div class="pic-wrap" v-if="certificateRegistrations.length > 0">
              <el-image
                v-for="(item, i) in certificateRegistrations"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
          <div class="info_box" :class="[ leaseAgreements.length > 0 ? 'image-wrap' : '' ]">
            <span class="txt">租赁协议：</span>
            <div class="pic-wrap" v-if="leaseAgreements.length > 0">
              <el-image
                v-for="(item, i) in leaseAgreements"
                :key="item.id + i"
                class="img-wrap"
                :src="item.url"
                fit="cover"
                :preview-src-list="item.previewUrl">
              </el-image>
            </div>
            <template v-else>
              <span class="element_color">&nbsp;</span>
              <span class="text-val"></span>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="wire"></div>

    <div class="device_info two-columns">
      <div class="title">设备退场记录</div>
      <div style="padding: 0 100px 30px 100px; margin-top: 30px;">
        <el-table :data="exitRecord" border size="small" style="width: 100%">
          <el-table-column prop="exitRegisterPerson" label="退场登记人"></el-table-column>
          <el-table-column prop="exitHandler" label="相关处理人"></el-table-column>
          <el-table-column prop="exitTime" label="退场登记时间"></el-table-column>
          <el-table-column prop="exitRemark" label="备注"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../util/httpInterface"
import HttpConfig from "../../util/httpConfig";
import constants from "../../util/constants";

export default {
  components: {},
  data() {
    return {
      designDocument: [],
      licences: [],
      installationUnits: [],
      instruction: [],
      inspectionCertificates: [],
      purchaseContracts: [],
      certificates: [],
      reports: [],
      testingUnits: [],
      maintenanceInstruction: [],
      certificateRegistrations: [],
      leaseAgreements: [],
      exitRecord: [],
      deviceImage: [],
      timeSlot: null,
      formData: {
        mobilizationSerialNumber: "",
        unit: "",
        bidSection: "",
        contractingUnit: "",
        recordTime: "",
        deviceType: "",
        model: "",
        deviceSource: "",
        lessor: "",
        installationUnit: "",
        qualification: "",
        registrationTime: "",
        devicePerson: "",
        inspection: "",
        examinationNumber: "",
        username: "",
        mobilizationTime: "",
        acceptanceTime: "",
        unitQualifications: "",
        supervisorUnit: "",
        deviceCnName: "",
        team: "",
        site: "",
        manufacturer: "",
        deliveryTime: "",
        factoryNumber: "",
        relevantPerson: "",
        sponsor: "",
        sponsorTime: "",
        report: "",
        validityTime: "",
        equipmentOperator: "",
      },
      form: {
        opinion: "",
        operator: "",
        handleState: "",
        handleTime: ""
      }
    };
  },

  methods: {
    // 返回
    returnPage() {
      this.$parent.$data.showPage = 0;
      this.$parent.refreshListData();
    },

    // 获取数据详情
    getDeviceInfo (id) {
      let _this = this;
      let params = {
        id: id
      }
      HttpInterface.requestGet(this, HttpInterface.URL_GET_BY_MECHANICAL_DEVICEID, params, function (response) {
        let data = response.data;
        if (data.success) {
          let dataInfo = data.other.mechanicalDevice;
          let result = data.other.acceptanceCheck[0];

          _this.showImageInfo(result);

          if (dataInfo.deviceImage) {
            let arr = [];
            arr.push({
              url: HttpConfig.serverUrl + dataInfo.deviceImage,
              imageUrl: [HttpConfig.serverUrl + dataInfo.deviceImage]
            });
            _this.deviceImage = arr;
          }

          let arrList = [];
          if (dataInfo.exitTime) {
            arrList.push({
              exitRegisterPerson: dataInfo.exitRegisterPerson,
              exitTime: dataInfo.exitTime.slice(0, 10),
              exitHandler: dataInfo.exitHandler,
              exitRemark: dataInfo.exitRemark,
            })
          }
          _this.exitRecord = arrList;

          if (dataInfo.startTime && dataInfo.endTime) {
            _this.timeSlot = dataInfo.startTime.slice(0, 10) + " - " + dataInfo.endTime.slice(0, 10);
          }

          _this.formData = dataInfo;
          if (dataInfo.mobilizationTime) {
            _this.formData.mobilizationTime = dataInfo.mobilizationTime.slice(0, 10);
          }
          if (dataInfo.acceptanceTime) {
            _this.formData.acceptanceTime = dataInfo.acceptanceTime.slice(0, 10);
          }
          if (dataInfo.recordTime) {
            _this.formData.recordTime = dataInfo.recordTime.slice(0, 10);
          }
          if (dataInfo.deliveryTime) {
            _this.formData.deliveryTime = dataInfo.deliveryTime.slice(0, 10);
          }
          if (dataInfo.registrationTime) {
            _this.formData.registrationTime = dataInfo.registrationTime.slice(0, 10);
          }
          if (dataInfo.validityTime) {
            _this.formData.validityTime = dataInfo.validityTime.slice(0, 10);
          }
          if (dataInfo.deviceType) {
            _this.formData.deviceTypeName = constants.DEVICE_TYPE_LIST[dataInfo.deviceType];
          }

          _this.form = {
            opinion: result.opinion,
            operator: result.operator,
            handleState: result.handleState,
            id: result.id
          };
          if (result.handleTime) {
            _this.form.handleTime = result.handleTime.slice(0, 10);
          }
          console.log(_this.form);
        }
      }, null)
    },

    // 渲染图片
    showImageInfo(result) {
      for (let i = 0; i < result.licences.length; i++) {
        result.licences[i].url = HttpConfig.serverUrl + result.licences[i].url;
        result.licences[i].previewUrl = [];
        result.licences[i].previewUrl.push(result.licences[i].url);
      }
      for (let i = 0; i < result.reports.length; i++) {
        result.reports[i].url = HttpConfig.serverUrl + result.reports[i].url;
        result.reports[i].previewUrl = [];
        result.reports[i].previewUrl.push(result.reports[i].url);
      }
      for (let i = 0; i < result.purchaseContracts.length; i++) {
        result.purchaseContracts[i].url = HttpConfig.serverUrl + result.purchaseContracts[i].url;
        result.purchaseContracts[i].previewUrl = [];
        result.purchaseContracts[i].previewUrl.push(result.purchaseContracts[i].url);
      }
      for (let i = 0; i < result.designDocument.length; i++) {
        result.designDocument[i].url = HttpConfig.serverUrl + result.designDocument[i].url;
        result.designDocument[i].previewUrl = [];
        result.designDocument[i].previewUrl.push(result.designDocument[i].url)
      }
      for (let i = 0; i < result.installationUnits.length; i++) {
        result.installationUnits[i].url = HttpConfig.serverUrl + result.installationUnits[i].url;
        result.installationUnits[i].previewUrl = [];
        result.installationUnits[i].previewUrl.push(result.installationUnits[i].url)
      }
      for (let i = 0; i < result.instruction.length; i++) {
        result.instruction[i].url = HttpConfig.serverUrl + result.instruction[i].url;
        result.instruction[i].previewUrl = [];
        result.instruction[i].previewUrl.push(result.instruction[i].url);
      }
      for (let i = 0; i < result.inspectionCertificates.length; i++) {
        result.inspectionCertificates[i].url = HttpConfig.serverUrl + result.inspectionCertificates[i].url;
        result.inspectionCertificates[i].previewUrl = [];
        result.inspectionCertificates[i].previewUrl.push(result.inspectionCertificates[i].url);
      }
      for (let i = 0; i < result.certificates.length; i++) {
        result.certificates[i].url = HttpConfig.serverUrl + result.certificates[i].url;
        result.certificates[i].previewUrl = [];
        result.certificates[i].previewUrl.push(result.certificates[i].url);
      }
      for (let i = 0; i < result.testingUnits.length; i++) {
        result.testingUnits[i].url = HttpConfig.serverUrl + result.testingUnits[i].url;
        result.testingUnits[i].previewUrl = [];
        result.testingUnits[i].previewUrl.push(result.testingUnits[i].url);
      }
      for (let i = 0; i < result.maintenanceInstruction.length; i++) {
        result.maintenanceInstruction[i].url = HttpConfig.serverUrl + result.maintenanceInstruction[i].url;
        result.maintenanceInstruction[i].previewUrl = [];
        result.maintenanceInstruction[i].previewUrl.push(result.maintenanceInstruction[i].url);
      }
      for (let i = 0; i < result.certificateRegistrations.length; i++) {
        result.certificateRegistrations[i].url = HttpConfig.serverUrl + result.certificateRegistrations[i].url;
        result.certificateRegistrations[i].previewUrl = [];
        result.certificateRegistrations[i].previewUrl.push(result.certificateRegistrations[i].url);
      }
      for (let i = 0; i < result.leaseAgreements.length; i++) {
        result.leaseAgreements[i].url = HttpConfig.serverUrl + result.leaseAgreements[i].url;
        result.leaseAgreements[i].previewUrl = [];
        result.leaseAgreements[i].previewUrl.push(result.leaseAgreements[i].url);
      }
      this.licences = result.licences;
      this.reports = result.reports;
      this.purchaseContracts = result.purchaseContracts;
      this.designDocument = result.designDocument;
      this.installationUnits = result.installationUnits;
      this.instruction = result.instruction;
      this.inspectionCertificates = result.inspectionCertificates;
      this.certificates = result.certificates;
      this.testingUnits = result.testingUnits;
      this.maintenanceInstruction = result.maintenanceInstruction;
      this.certificateRegistrations = result.certificateRegistrations;
      this.leaseAgreements = result.leaseAgreements;
    },
  }
};
</script>

<style scoped lang="scss">
  .el_input {
    width: 260px;
  }

  .content_padding{
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;

    .device_info{
      margin-top: 30px;

      .upload-pic{
        margin-left: 60px;
        padding: 30px 0 0 60px;
        display: flex;

        span{
          font-size: 14px;
          margin-right: 20px;
          margin-top: 4px;
        }
      }

      &.two-columns{
        .textarea-wrap{
          margin-left: 60px;
          padding: 30px 20px 0 0;

          span{
            margin-right: 0;
            margin-top: 0;
          }

          .txt{
            font-size: 14px;
            width: 130px;
            display: inline-block;
            text-align: right;
          }

          .textarea{
            display: inline-block;
            width: 1070px;
            height: 80px;
            margin-left: 20px;
            border-radius: 4px;
            background: #f5f5f5;
            padding: 10px 14px;
            box-sizing: border-box;
          }
        }

        .left-column{
          margin-left: 20px;
        }

        .left-column,
        .right-column{
          width: 48%;
        }
      }

      .title{
        width: 100%;
        font-weight: bold;
        line-height: 50px;
        display: inline-block;
        border-bottom: 1px solid rgb(236, 236, 236);
      }

      .basic_info{
        display: flex;
        flex-wrap: wrap;

        .info_box{
          margin-right: 30px;
          margin-top: 24px;
          display: flex;
          align-items: center;

          &.image-wrap{
            flex-direction: column;
            align-items: normal;

            .pic-wrap{
              margin-left: 185px;
              margin-top: -40px;
              width: 500px;

              .img-wrap{
                width: 100px;
                height: 100px;
                margin: 6px 6px 0 6px;
                border-radius: 3px;
                border: 1px solid #cbcbcb;
              }
            }

            .txt{
              line-height: 42px;
            }
          }

          .txt{
            font-size: 14px;
            width: 174px;
            display: inline-block;
            text-align: right;
          }

          .element_color{
            color: #f44336;
            font-size: 12px;
            margin-right: 12px;
          }

          .text-val{
            font-size: 14px;
            color: #333333;
            background: #f5f5f5;
            height: 42px;
            line-height: 42px;
            padding-left: 16px;
            border-radius: 4px;
            display: inline-block;
            width: 400px;
          }

          .input_width{
            height: 42px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .wire{
    width: 100%;
    height: 1px;
    background: rgb(236, 236, 236);
    margin-top: 30px;
  }

  .el-button--text >>> .iconfanhui,
  .el-button--text >>> .iconfasongtijiao{
    margin-right: 4px;
    font-size: 18px;
    vertical-align: -2px;
  }
</style>

